<!-- 输入框，可以扩展输入更多 -->
<template>
  <div class="flex_row">
    <ex_super_input :value="value" v-bind="$attrs" v-on="$listeners" :clearable="clearable"></ex_super_input>
    <el-popover width="400" trigger="click" ref="PopoverSearch">
      <div>
        <el-input type="textarea" :rows="6" v-model="searchCodes"
          :placeholder="$tt('tip_pleace_input_key_can_enter_or_comma_or_semicolon_split')" />
        <el-button class="mg_t1" @click="clearableFn">{{ $tt('label_button_empty') }}</el-button>
        <el-button type="primary" class="mg_t1" @click="searchCustomer">{{ $tt('label_fms_account_config_confirm')
          }}</el-button>

      </div>
      <el-button slot="reference" icon="el-icon-plus" class="mg_l1" @clicl="synValue"></el-button>
    </el-popover>

  </div>
</template>
<script>

import role_system_mixin from '@/mixin/role_system_mixin';

export default {
  mixins: [role_system_mixin,],

  props: {
    value: null,
    clearable: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(newVal,oldVal) {
      // this.searchCodes = this.value
    }
  },
  data() {
    return {
      searchCodes: "",
    }
  },
  methods: {
    synValue(){
      this.searchCodes = this.value
    },
    searchCustomer() {
      let data = this.searchCodes.split(/[,、;\s\n]/).filter(it => it)
      this.$emit('input', data.join(','))
    },
    clearableFn() {
      this.searchCodes = ''
    }
  }
}

</script>
